// 产品详情页
<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt=" " width="100%" style="display: block">
      </van-swipe-item>
    </van-swipe>
    <!-- Tips 提示组件 -->
    <Tips />
    <div class="info">
      <div class="title">{{ info.name }}</div>
      <div class="goods_brief">{{ info.goods_brief }}</div>
      <div class="retail_price">{{ info.retail_price | RMBformat}}</div>
    </div>
    <van-cell title="选择商品信息" is-link @click="isSkuShow = true"/>
    <div class="attribute">
      <h3 class="head">商品参数</h3>
      <ul>
        <li v-for="(item, index) in attribute" :key="index">
          <div class="left">{{ item.name }}</div>
          <div class="right van-ellipsis">{{ item.value }}</div>
        </li>
      </ul>
    </div>
    <div class="goods_desc" v-html="goods_desc"></div>
    <div class="questions">
      <span class="head">常见问题</span>
      <ul class="issue">
        <li v-for="(item, index) in questions" :key="index">
          <h4>{{ item.question }}</h4>
          <p>{{ item.answer }}</p>
        </li>
      </ul>
    </div>
    <div class="head">
      <span>大家都在看</span>
    </div>
    <div class="products">
      <Products :goodsList="goodsList"/>
    </div>
    <!-- 用来防止底部 AppGoodsAction 挡住下方字体 -->
    <div class="bottom"></div>
    <!-- 选择商品信息(弹出层) -->
    <van-sku
      ref="sku"
      v-model="isSkuShow"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
    />
    <!-- 底下tabbar功能键 -->
    <AppGoodsAction @addToCart="addToCart" :goodsCount="goodsCount" />
  </div>
</template>

<script>
import { GetGoodsDetailData, GetGoodsRelatedData, GetGoodsCount, AddProductToCart } from '@/utils/api.js'
import Tips from '@/components/Tips.vue'
import AppGoodsAction from '@/components/AppGoodsAction.vue'
import Products from '@/components/Products.vue'
export default {
  name: 'ProductDetail',
  components: {
    Tips,
    AppGoodsAction,
    Products
  },
  props: [],
  data () {
    return {
      // *轮播图
      gallery: [],
      // *产品信息
      info: {},
      // *商品明细(参数)
      attribute: [],
      // *商品信息(图片信息)
      goods_desc: '',
      // *相关问题数组列表(问题+回答)
      questions: [
        { question: '购买运费如何收取？', answer: '单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。(港澳台地区需满108元)' },
        { question: '使用什么快递发货？', answer: '严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区(港澳台地区除外)' },
        { question: '如何申请退货？', answer: '自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，请予以谅解' },
        { question: '如何开具发票？', answer: '如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息' }
      ],
      // *相关产品列表
      goodsList: [],
      // !---------------------以下为 sku 属性
      // *控制弹出层显示
      isSkuShow: false,
      // *商品的 sku 数据
      sku: {
        tree: [], //
        hide_stock: false, // *商品库存(boolean 值)
        price: '0', // *默认价格（单位元）
        stock_num: 0 // *商品总库存
      },
      // * sku 商品的信息
      goods: {
        // ?默认商品 sku 缩略图
        picture: ''
      },
      // *购物车产品数量，需要在 AppGoodsAction 子组件中使用，所以进行父传子
      goodsCount: 0,
      // *sku 商品传递的对象结构(加入购物车/立即购买)
      skuData: {},
      // *productList数据(在添加购物车处使用)
      productList: []
    }
  },
  computed: {},
  created () {
    // *发送请求，请求传入 '商品id' 的商品明细
    GetGoodsDetailData({
      id: this.$route.query.id
    }).then(response => {
      if (response.errno === 0) {
        console.log(response)
        // this.gallery = response.data.gallery // 常规写法
        const { gallery, info, attribute, productList } = response.data // ES6 解构写法
        this.gallery = gallery
        this.info = info
        this.attribute = attribute
        this.goods_desc = info.goods_desc
        // * sku 数据赋值
        this.sku.price = info.retail_price
        this.sku.stock_num = info.goods_number
        this.goods.picture = info.list_pic_url
        // * productList 数据
        this.productList = productList
      }
    }).catch(error => {
      console.log(error)
    })

    // *发送请求获取相关产品数据(大家都在看模块)
    GetGoodsRelatedData({
      id: this.$route.query.id
    }).then(response => {
      // console.log(response)
      if (response.errno === 0) {
        this.goodsList = response.data.goodsList
      }
    }).catch(error => {
      console.log(error)
    })

    // *获取购物车产品数量
    GetGoodsCount().then(response => {
      if (response.errno === 0) {
        // console.log(response)
        this.goodsCount = response.data.cartTotal.goodsCount
      }
    }).catch(error => {
      console.log(error)
    })
  },
  mounted () {},
  watch: {},
  methods: {
    addToCart () { // 点击购物车函数，AppGoodsAction 子组件传过来的方法参数
      // ? 点击购物车按钮，如果 sku 没有展示的情况下 -> 展示 sku
      // ? 点击购物车按钮，如果 sku 正在展示的情况下 -> 加入购物车
      if (this.isSkuShow) {
        // *发起加入购物车的请求
        AddProductToCart({
          goodsId: this.$route.query.id, // *当前产品明细路由里面携带的 query.id
          productId: this.productList[0].id,
          number: this.$refs.sku.getSkuData().selectedNum // *加入购物车,获取选择加入购物车的数量
        }).then(response => {
          if (response.errno === 0) {
            console.log(response)
            // ? 添加到购物车事项顺序：
            // *  1、更新 ProductDetail 购物车数量显示
            this.goodsCount = response.data.cartTotal.goodsCount
            this.$toast.success('加入购物车成功')
            // *  2、跳转至购物车页面(个人觉得逻辑不合理,此处自择实现与否)
            // setTimeout(() => {
            //   this.$router.push('/cart')
            // }, 1200)
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.isSkuShow = true
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .info{ // 商品信息全局样式
    background-color: lightgray;
    text-align: center;
    line-height: .8rem;
    .title{
      font-size: .8rem;
      padding: .3rem;
    }
    /deep/ .goods_brief{
      font-size: .5rem;
      padding: .1rem;
    }
    .retail_price{
      font-size: .4rem;
      color: darkred;
    }
    border-bottom: 1px solid lightgray;
  }
  .van-cell{ // 选择商品信息单元格样式
    background-color: #cccccc;
    box-shadow: 0 0 1px 0 seashell;
    height: 1rem;
    line-height: .5rem;
    .van-cell__right-icon{
      line-height: .5rem;
    }
    &::after{
    content: none;
    }
  }
  .attribute{ // 产品属性样式
    background: lightgray;
    padding: .2rem 2%;
    font-size: .4rem;
    h3{
      font-size: .5rem;
      line-height: 1rem;
    }
    li{
      line-height: .66rem;
      background-color: #cccccc;
      box-shadow: 0 0 1px 0.5px #ffffff;
      border-radius: 5px;
      margin-bottom: .25rem;
      display: flex;
      .left{
        width: 10%;
        text-align: right;
        margin-right: .15rem;
        color: #000000;
        font-size: .35rem;
      }
      .right{
        flex: 1;
      }
    }
  }
  // ? /deep/ vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，
  // ?        而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped
  /deep/ .goods_desc{ // 产品信息样式
    background-color: lightgray;
    img{
      display: block;
      width: 100%;
    }
    p:nth-last-child(1){
      height: .5rem;
    }
  }
  .questions{ // 相关问题样式
    font-size: .5rem;
    background-color: lightgray;
    padding: 0 2%;
    .issue{
      li{
        padding: .13rem;
      }
    }
    h4{
      font-size: .4rem;
      font-weight: bold;
    }
    p{
      font-size: .35rem;
    }
  }
  // 由于 head 前后都用到，所以单独放出来写
  .head{ // 头部文字样式(相关问题/产品)
    font-size: .45rem;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
    justify-content: space-evenly;
    &::before, &::after{
      content: '';
      width: 18%;
      height: 1px;
      background-color: #000000;
      left: 0;
      top: 0;
    }
  }
  .products{ // 相关产品样式
    background-color: lightgray;
  }
  /deep/ .van-sku-container{ // sku 样式
    background-color: lightgray;
    .van-icon{
      color: #000000;
    }
  }
  .bottom{ // 底部预留 div 样式
    background-color: lightgray;
    height: 1.5rem;
  }
</style>
